<template>
    <div class="login-container">
        <el-card class="login-box">
            <h1 class="login-title">后台管理系统</h1>

            <el-form ref="loginForm" :model="loginForm">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="User" clearable />
                </el-form-item>

                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" placeholder="请输入密码" prefix-icon="Lock" show-password
                        clearable />
                </el-form-item>

                <!-- 登录按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" style="width: 100%">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { ELMessage } from 'element-plus'


const userStore = useUserStore()

const form = ref({
    username: 'yang47',
    password: '123456'
})

const handleLogin = async () => {
    try {
        await userStore.login(form.value);
    
    } catch (error) {
        console.error('登录失败:', error)
    }
}
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(145deg, #f0f2f5 0%, #c1c3c7 100%);
}

.login-box {
    width: 400px;
    padding: 30px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-title {
    text-align: center;
    margin-bottom: 30px;
    color: #303133;
}
</style>